<div id="settingsUsers" style="height:100%">
    <div class="ui-layout-west" id="settingsUsersUsers">
        <div class="ui-layout-center">
            <div class="clearfix tbl settingsUsersUsersTable" id="settingsUsersUsersTable"></div>    
        </div>
        <div class="ui-layout-south">
            <button class="small" id="sUsersFixedAdd">Add new</button>    
            <button class="small" id="sUsersFixedDelete">Delete</button>    
            <button class="small" id="sUsersFixedSave">Save</button>    
            <button class="small" id="sUsersFixedCancel">Cancel</button>
        </div>
    </div>
    <div class="ui-layout-center" id="settingsUsersGroups">
        <div class="ui-layout-center">
            <div class="clearfix tbl settingsUsersGroupsTable" id="settingsUsersGroupsTable"></div>    
        </div>
        <div class="ui-layout-south">
            <button class="small" id="sUsersGroupsAdd">Add new</button>    
            <button class="small" id="sUsersGroupsDelete">Delete</button>    
            <button class="small" id="sUsersGroupsSave">Save</button>    
            <button class="small" id="sUsersGroupsCancel">Cancel</button>
        </div>
    </div>
</div>
<script>
    var SettingsUsersFX = function() {
        var _self = this;
        _self.perform = function() {
            //dodavanje layout-a za parent div
            $("#settingsUsers").layout({
                resizable: false,
                closable: false,
                west__size: ".5"
            });
            $("#settingsUsersUsers").layout({
                resizable: false,
                closable: false,
                south__size: "30"
            });
            $("#settingsUsersGroups").layout({
                resizable: false,
                closable: false,
                south__size: "30"
            });
            $("#settingsUsersUsersTable").addScroll();
            _self.loadDataForSettingsUsersUsersTable();
            $("#settingsUsersGroupsTable").addScroll();
            _self.loadDataForSettingsUsersGroupsTable();

            window.refreshAndSortTable = _self.refreshSortedTable;
        };
        _self.refreshSortedTable = function(table, columnName, ascDesc, callback){
            var _self = this;
            _self.table = table;
            _self.request = 0;

            if(table == "settingsUsersUsersTable")
                _self.request = 610;

            if(table == "settingsUsersGroupsTable")
                _self.request = 611;

            _self.columnName = columnName;
            _self.sortItem = "";
            _self.ascDesc = ascDesc;
            _self.action = "getItems";

            _self.random = Math.random();
            _self.url = "js/tableParams/" + _self.request + ".json?x=" + random;

            $.get(_self.url, function(response) {
                $(response.desc).each(function(index,value){
                    if(value.title == columnName){
                        _self.sortItem = value.param;
                        return false;
                    }
                });

                var params = {
                    request: _self.request,
                    action: _self.action,
                    sortItem: _self.sortItem,
                    ascDesc: _self.ascDesc
                };

                window.tableConstructor.generateTable(params, callback);
            });

        };
        
        _self.loadDataForSettingsUsersUsersTable = function(callback) {
            var params = {
                request: 610,
                action: "getItems"
            };
            window.tableConstructor.generateTable(params, callback);
        };
        _self.loadDataForSettingsUsersGroupsTable = function(callback) {
            var params = {
                request: 611,
                action: "getItems"
            };
            window.tableConstructor.generateTable(params, callback);
        };
        _self.assignEventHandlers = function(){
            $(document).on("click", ".scrollable .tbl.settingsUsersUsersTable .row.data", function() {
                window.backendInterface.editItem($('.scrollable .tbl.settingsUsersUsersTable'),$(this),_self.loadDataForSettingsUsersUsersTable,610);
            });

            $(document).on("click", "#sUsersFixedAdd", function() {
                window.backendInterface.addItem($('.scrollable .tbl.settingsUsersUsersTable'),_self.loadDataForSettingsUsersUsersTable,610);
            });
            $(document).on("click", "#sUsersFixedDelete", function() {
                window.backendInterface.deleteItem(610);
            });
            $(document).on("click", "#sUsersFixedSave", function() {
                window.backendInterface.save(610);
            });
            $(document).on("click", "#sUsersFixedCancel", function() {
                window.backendInterface.cancel(610);
            });

            $(document).on("click", ".scrollable .tbl.settingsUsersGroupsTable .row.data", function() {
                window.backendInterface.editItem($('.scrollable .tbl.settingsUsersGroupsTable'),$(this),_self.loadDataForSettingsUsersGroupsTable,611);
            });

            $(document).on("click", "#sUsersGroupsAdd", function() {
                window.backendInterface.addItem($('.scrollable .tbl.settingsUsersGroupsTable'),_self.loadDataForSettingsUsersGroupsTable,611);
            });
            $(document).on("click", "#sUsersGroupsDelete", function() {
                window.backendInterface.deleteItem(611);
            });
            $(document).on("click", "#sUsersGroupsSave", function() {
                window.backendInterface.save(611);
            });
            $(document).on("click", "#sUsersGroupsCancel", function() {
                window.backendInterface.cancel(611);
            });
        };
        _self.clearEventHandlers = function(){
            $(document).off("click", ".scrollable .tbl.settingsUsersUsersTable .row.data");
            $(document).off("click", ".scrollable .tbl.settingsUsersGroupsTable .row.data");

            $(document).off("click", "#sUsersFixedAdd");
            $(document).off("click", "#sUsersFixedDelete");
            $(document).off("click", "#sUsersFixedSave");
            $(document).off("click", "#sUsersFixedCancel");

            $(document).off("click", "#sUsersGroupsAdd");
            $(document).off("click", "#sUsersGroupsDelete");
            $(document).off("click", "#sUsersGroupsSave");
            $(document).off("click", "#sUsersGroupsCancel");
        };
    };
    if(!window.instance){
        window.backendInterface.cancel();
        window.instance = new SettingsUsersFX();
        window.instance.perform();
        window.instance.clearEventHandlers();
        window.instance.assignEventHandlers();
    }
    else{
        window.backendInterface.cancel();
        window.instance = new SettingsUsersFX();
        window.instance.perform();
        window.instance.clearEventHandlers();
        window.instance.assignEventHandlers();
    }
</script>